$(() => {
    // 1、获取各类文章在总数
    function getTotalArticle() {
        $.get('/admin/data/info', res => {
            $('.totalCount em').text(res.totalArticle);
            $('.totalCount_day em').text(res.dayArticle);
            $('.commentCount em').text(res.totalComment);
            $('.commentCount_day em').text(res.dayComment);
        })
    };
    // 2、折线图
    // 2.1、折线图数据
    function lineData() {
        let count = [];
        $.get('/admin/data/article', res => {
            const date = res.date.map(item => {
                count.push(item.count)
                return item.date;
            });
            setLine(date, count);
        })
    }

    // 2.3、折线图配置
    function setLine(date, count) {
        let myCharts = echarts.init($('#day_article_show')[0]);
        option = {
            title: {
                text: '日新增文章趋势',
                x: 'center',
                y: 'top',
            },
            xAxis: {
                name: '日期',
                nameLocation: 'end',
                type: 'category',
                boundaryGap: false,
                data: date,
            },
            yAxis: {
                name: '数量',
                nameLocation: 'end',
                type: 'value',
            },

            toolbox: {
                feature: {
                    dataZoom: {}, //  区域缩放
                    dataView: {}, //  数据视图
                    magicType: { //  动态图表类型切换
                        type: ['bar', 'line'],
                    },
                    restore: {}, //  重置
                    saveAsImage: {}, //  导出图片
                },
            },

            series: [{
                data: count,
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        },
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'red',
                        }, {
                            offset: 1,
                            color: '#fff',
                        }])
                    }
                }
            }, ]
        };
        myCharts.setOption(option);
    }

    // 3、饼图
    // 3.1、饼图数据（各类型文章数量统计）
    function pieData() {
        $.get('/admin/data/category', res => {
            // 对象数组类型对象key值替换
            const newArr = [];
            res.date.forEach(item => {
                // 定义数组内部对象形式
                let obj = {};
                obj.name = item.name;
                obj.value = item.articles;
                // 将对象数据推到数组中
                newArr.push(obj);
            })
            setPie(newArr);
        })
    }

    // 3.2、饼图配置
    function setPie(date) {
        let myCharts = echarts.init($('#pie_show')[0]);
        option = {
            legend: {
                top: '5%',
                left: 'center'
            },

            series: [{
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '55%'],
                avoidLabelOverlap: false,
                data: date
            }],
            color: ['rgb(88, 133, 232)', 'rgb(19, 207, 213)', 'rgb(0, 206, 104)', 'rgb(255, 149, 101)', 'rgb(32, 255, 25)']
        };
        myCharts.setOption(option);
    }

    // 4、柱状图
    // 4.1、柱状图数据
    function barData() {
        let date=[];
        let data=[];
        $.get('/admin/data/visit', res => {
            for (const key in res.data) {
                date.unshift(key);
                data.unshift(res.data[key]);
            }
            setBar(date,data);
        });
    };

    // 4.2、柱状图配置
    function setBar(date,data){
        let mCharts = echarts.init(document.querySelector('#column_show'));
        let option = {
            xAxis: {
                type: 'category',   // 类目轴（属性名）
                data:date,
            },
            yAxis: {
                type: 'value',  //  值
            },
            series: [{
                type: 'bar',
                barWidth:'30%', //设置柱状图的大小
                data: data,
                itemStyle:{
                    normal:{
                        color:'rgb(88, 133, 232)',
                    }
                }
            }]
        };
        mCharts.setOption(option);
    }

    // 1、获取各类信息的总数居
    getTotalArticle();
    // 2、折线图
    lineData();
    // 3、饼图
    pieData();
    // 4、柱状图
    barData();
})